<style>
  #auth {
    cursor: pointer;
    color: red;
    font-size: 12px;
  }
</style>
<div class="layui-container fly-marginTop fly-user-main">

  {include file='common/UserMenu'/}

  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon">&#xe602;</i>
  </div>
  <div class="site-mobile-shade"></div>

  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon">&#xe602;</i>
  </div>
  <div class="site-mobile-shade"></div>


  <div class="fly-panel fly-panel-user" pad20>
    <div class="layui-tab layui-tab-brief" lay-filter="user">
      <ul class="layui-tab-title" id="LAY_mine">
        <li class="layui-this" lay-id="info">我的资料</li>
        <li lay-id="avatar">头像</li>
        <li lay-id="pass">密码</li>
        <li lay-id="bind">封面图</li>
      </ul>
      <div class="layui-tab-content" style="padding: 20px 0;">

        <!-- 个人资料 -->
        <div class="layui-form layui-form-pane layui-tab-item layui-show">
          <form method="post">
            <!-- 设置关键字 区分是哪个表单提交过来的 -->
            <input type="hidden" name="action" value="profile">
            <div class="layui-form-item">
              <label for="L_email" class="layui-form-label">邮箱</label>
              <div class="layui-input-inline">
                <!-- 邮箱作为唯一的账号 不更改 -->
                <input type="text" id="L_email" name="email" lay-verify="email" autocomplete="off"
                  value="{$LoginUser.email}" disabled class="layui-input">
              </div>
              <!-- 邮箱验证 -->
              {if($LoginUser.auth == 0)}
              <div class="layui-form-mid layui-word-aux">您的邮箱未激活，请点击<a id="auth">验证邮箱</a>。</div>
              {/if}
            </div>

            <!-- 昵称 -->
            <div class="layui-form-item">
              <label for="nickname" class="layui-form-label">昵称</label>
              <div class="layui-input-inline">
                <input type="text" id="nickname" name="nickname" required lay-verify="required" autocomplete="off"
                  value="{$LoginUser.nickname}" class="layui-input">
              </div>

              <!-- 性别 -->
              <div class="layui-inline">
                <div class="layui-input-inline" style="width: 250px;">
                  <input type="radio" name="sex" value="0" {$LoginUser.sex==0 ? 'checked' : '' } title="保密">
                  <input type="radio" name="sex" value="1" {$LoginUser.sex==1 ? 'checked' : '' } title="男">
                  <input type="radio" name="sex" value="2" {$LoginUser.sex==2 ? 'checked' : '' } title="女">
                </div>
              </div>
            </div>


            <div class="layui-form-item">
              <!-- 省份 -->
              <label for="province" class="layui-form-label">省份</label>
              <div class="layui-input-inline" style="width: 185px;">
                <select name="province" id="province" lay-verify="required" lay-filter="province">
                  <option value="0">请选择</option>
                  {foreach($provinces as $item)}
                  <option value="{$item.code}" {$item.code == $LoginUser['province'] ? 'selected' : ''}>{$item.name}</option>
                  {/foreach}
                </select>
              </div>

              <!-- 市 -->
              <label for="city" class="layui-form-label">市</label>
              <div class="layui-input-inline" style="width: 185px;">
                <select name="city" id="city" lay-verify="required" lay-filter="city">
                  <option value="0">请选择</option>
                  {foreach $citys as $item}
                  <option value="{$item.code}" {$item.code == $LoginUser['city'] ? 'selected' : ''}>{$item.name}</option>
                  {/foreach}
                </select>
              </div>

              <!-- 区 -->
              <label for="district" class="layui-form-label">区</label>
              <div class="layui-input-inline" style="width: 185px;">
                <select name="district" id="district" lay-verify="required" lay-filter="district">
                  <option value="0">请选择</option>
                  {foreach $districts as $item}
                  <option value="{$item.code}" {$item.code == $LoginUser['district'] ? 'selected' : ''}>{$item.name}</option>
                  {/foreach}
                </select>
              </div>
            </div>
            <div class="layui-form-item layui-form-text">
              <label for="content" class="layui-form-label">签名</label>
              <div class="layui-input-block">
                <textarea placeholder="这个人很懒，什么都没留下" id="content" name="content" autocomplete="off" class="layui-textarea"
                  style="height: 80px;">{$LoginUser.content}</textarea>
              </div>
            </div>
            <div class="layui-form-item">
              <button class="layui-btn" key="set-mine" lay-submit>确认修改</button>
            </div>
          </form>
        </div>

        <div class="layui-form layui-form-pane layui-tab-item">
          <form method="post" enctype="multipart/form-data">
            <input type="hidden" name="action" value="avatar">
            <div class="layui-form-item">
              <div class="avatar-add">
                <button type="button" class="layui-btn upload-img" onclick="avatar.click()">
                  <i class="layui-icon">&#xe67c;</i>上传头像
                </button>
                <input type="file" name="avatar" id="avatar" hidden>
                <img id="avatar-preview" src="{$LoginUser['avatar'] ? $LoginUser['avatar'] : '/static/home/res/images/avatar/default.png'}">
                <span class="loading"></span>
              </div>
            </div>

            <div class="layui-form-item">
              <button class="layui-btn" style="transform: translateX(-50%);margin-left: 20%;" key="set-mine" lay-submit>确认上传</button>
            </div>
          </form>
        </div>

        <div class="layui-form layui-form-pane layui-tab-item">
          <form method="post">
            <input type="hidden" name="action" value="password">
            <div class="layui-form-item">
              <label for="L_nowpass" class="layui-form-label">当前密码</label>
              <div class="layui-input-inline">
                <input type="password" id="L_nowpass" name="nowpass" placeholder="请输入原密码" required lay-verify="required" autocomplete="off"
                  class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label for="L_pass" class="layui-form-label">新密码</label>
              <div class="layui-input-inline">
                <input type="password" id="L_pass" name="pass" placeholder="请输入新密码" required lay-verify="required" autocomplete="on"
                  class="layui-input">
              </div>
              <!-- <div class="layui-form-mid layui-word-aux">6到16个字符</div> -->
            </div>
            <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">确认密码</label>
              <div class="layui-input-inline">
                <input type="password" id="L_repass" name="repass" placeholder="请输入确认密码" required lay-verify="required" autocomplete="on"
                  class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <button class="layui-btn" style="transform: translateX(-70%);margin-left: 20%;" key="set-mine" lay-submit>确认修改</button>
            </div>
          </form>
        </div>

        <div class="layui-form layui-form-pane layui-tab-item">
          <form method="post" enctype="multipart/form-data">
            <input type="hidden" name="action" value="cover">
            <div class="layui-form-item">
              <div class="avatar-add">
                <button type="button" class="layui-btn upload-img" onclick="cover.click()">
                  <i class="layui-icon">&#xe67c;</i>上传封面
                </button>
                <input type="file" name="cover" id="cover" hidden>
                <img id="cover-preview" src="{$LoginUser['cover'] ? $LoginUser['cover'] : '/static/home/res/images/avatar/default.png'}">
                <span class="loading"></span>
              </div>
            </div>

            <div class="layui-form-item">
              <button class="layui-btn" style="transform: translateX(-50%);margin-left: 20%;" key="set-mine" lay-submit>确认上传</button>
            </div>
          </form>
        </div>
      </div>

    </div>
  </div>
</div>
</div>
<script>

  // 引用layui的模块
  layui.use(['layer', 'form'], function () {
    var layer = layui.layer,
      form = layui.form,
      $ = layui.jquery;
    
    // 省份
    form.on('select(province)', function (data) {
      // 获取所选的地区码 
      let code = data.value

      // 发起ajax请求
      $.ajax({
        type: 'post',
        url: `{:url('home/user/region')}`,
        data: {
          code: code
        },
        dataType: 'json',
        success: function (result) {
          // 是否查询失败
          if (result.code === 0) {
            layer.msg(result.msg);
            return false;
          }

          // 定义一个空的字符串用来拼接结果
          let str = '';

          // 循环数据
          for (let item of result.data) {
            // 拼接
            str += `<option value="${item.code}">${item.name}</option>`;
          }

          $('#city').html(str);

          //用layui的方式重新渲染一下select下拉框
          form.render('select');

          // 获取第一个城市
          let CityCode = result.data[0] ? result.data[0].code : '';

          // 调用获取城市的函数
          getCity(CityCode);
        }
      })

    })

    // 选城市
    form.on('select(city)',function(data){
      let code = data.value;

      getCity(code)
    })

    // 查询所选的市的函数
    function getCity(code = null) {
      // 发起ajax请求
      $.ajax({
        type: 'post',
        url: `{:url('home/user/region')}`,
        data: {
          code: code
        },
        dataType: 'json',
        success: function (result) {
          // 是否请求失败
          if(result.code === 0)
          {
            //提示框
            layer.msg(success.msg)
            return false
          }

          // 定义一个空的字符串用来拼接结果
          let str = '';

          // 循环数据
          for (let item of result.data) {
            // 拼接
            str += `<option value="${item.code}">${item.name}</option>`;
          }

          $('#district').html(str);

          //用layui的方式重新渲染一下select下拉框
          form.render('select')
        }
      })
    }

    //  邮箱认证
    $('#auth').click(function () {

      // 发起Ajax请求
      $.ajax({
        type: 'post',
        // 请求地址
        url: `{:url('home/user/email')}`,
        dataType: 'json',
        success: function (result) {
          // 如果code === 1 那么就成功
          if (result.code === 1) {
            layer.msg(result.msg, { icon: 6 })
            return false
          } else {
            // 失败
            layer.msg(result.msg, { icon: 5 })
            return false
          }
        }
      })
    })


    // 头像预览
    $('#avatar').change(function(){
      //得到input选择的一个文件列表中第一个文件是一个对象
      var file = this.files[0] ? this.files[0] : {}
      var src = GetObjectURL(file)
      $("#avatar-preview").attr("src", src)
    })

    // 头像预览
    $('#cover').change(function(){
      //得到input选择的一个文件列表中第一个文件是一个对象
      var file = this.files[0] ? this.files[0] : {}
      var src = GetObjectURL(file)
      $("#cover-preview").attr("src", src)
    })

    // 图片预览函数
    function GetObjectURL(file) 
    {
      // createObjectURL  给一个文件对象 可以提取出一个url本地地址出来
      var url = null;

      //判断是否为IE浏览器还是google还是其他浏览器
      if (window.createObjectURL != undefined) 
      {
        url = window.createObjectURL(file)
      } else if (window.URL != undefined) 
      {
        url = window.URL.createObjectURL(file)
      } else if (window.webkitURL != undefined) 
      {
        url = window.webkitURL.createObjectURL(file)
      }

      return url
    }
  })
</script>